<template>
  <ElConfigProvider :locale="locale">
    <router-view></router-view>
  </ElConfigProvider>
</template>

<script >
import { ElConfigProvider } from 'element-plus'
import { ref, computed } from 'vue'
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
import enLocale from 'element-plus/lib/locale/lang/en'
import { useStore } from 'vuex'
export default {
  components: {
    [ElConfigProvider.name]: ElConfigProvider
  },
  setup() {
    const store = useStore()
    const zlocale = ref(zhLocale)
    const elocale = ref(enLocale)
    const locale = computed(() => {
      return store.getters.lang === 'zh' ? zlocale.value : elocale.value
    })
    return {
      locale
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  height: 100%;
}
</style>
